<!doctype html>
<html lang="en" class="h-100" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <title>客户端错误</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/cover/">



    <!-- Bootstrap core CSS -->
<link th:href="@{/assets/dist/css/bootstrap.min.css}" rel="stylesheet">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      *{
        margin: 0; /*外边距*/
        padding: 0; /*内边距*/
        box-sizing: border-box; /*盒子大小规则*/
        font-family: sans-serif; /*字体:非衬线*/
      }
      body{
        background: rgb(242, 242, 255); /*背景颜色渐变*/
        height: 100vh; /*高度：100视窗*/
      }
      #container{
        position: absolute; /*绝对定位*/
        top: 10%; /*距上部*/
        left: 10%;
        right: 10%;
        bottom: 10%;
        border-radius: 10px; /*圆角边框*/
        display: flex; /*弹性盒模型*/
        justify-content: center; /*主轴对齐方式*/
        align-items: center; /*交叉轴对齐方式*/
        background: #000; /*颜色*/
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); /*背景阴影*/
      }
      #container .content{
        max-width: 600px; /*最大宽度*/
        text-align: center; /*字体行居中*/
      }
      #container .content h2{
        font-size: 18vw; /*字体大小*/
        color: #fff;
        line-height: 1em; /*行高*/
      }
      #container .content h4{
        position: relative;
        font-size: 1.5em;
        margin-bottom: 20px;
        color: #111;
        background: #fff;
        font-weight: 300;
        padding: 10px 20px;
        display: inline-block; /*行内盒模型*/
      }
      #container .content p{
        color: #fff;
        font-size: 1.2em;
      }
      #container .content a{
        position: relative;
        display: inline-block;
        padding: 10px 25px;
        background: #ff0562;
        color: #fff;
        text-decoration: none;
        margin-top: 25px;
        border-radius: 25px;
        border-bottom: 4px solid #d00d56; /*下边框*/
        user-select: none;
      }
      #container .content .tohome:hover{
        color:black;
        background:white;
        border:1px solid black;
      }

    </style>


    <!-- Custom styles for this template -->
    <link th:href="@{/css/cover.css}" rel="stylesheet">
  </head>
  <body class="d-flex h-100 text-center text-white bg-dark">

<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
  <header class="mb-auto">
    <div>
      <nav class="nav nav-masthead justify-content-center float-md-end">
        <a class="nav-link" aria-current="page" th:href="@{/}">主页</a>
        <a class="nav-link" href="#">联系我们</a>
      </nav>
    </div>
  </header>



  <main class="px-3">


    <div id='container'>
      <div class='content'>
        <h2>404</h2>
<!--        <h4>Opps! Page not found</h4>-->
<!--        <p>-->
<!--          The page you were looking for doesn't exist. You may havec mistyped the address or the page may have moved.-->
<!--        </p>-->
<!--        <a class=" tohome" th:href="@{/}">-->
<!--          Back To Home-->
<!--        </a>-->
<!--      </div>-->
    </div>


<!--    <h1>客户端请求错误！</h1>-->
<!--    <h2>404</h2>-->
<!--    <p class="lead">网页资源未找到，请检查地址。</p>-->
<!--    <p class="lead">-->
<!--      <a href="#" class="btn btn-lg btn-secondary fw-bold border-white bg-white">更多细节</a>-->
<!--    </p>-->
  </main>

  <footer class="mt-auto text-white-50">
    <p>Cover template for <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, by <a href="https://twitter.com/mdo" class="text-white">@mdo</a>.</p>
  </footer>
</div>



  </body>
</html>
